<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import china from './map/china.json'
import { getTableDataAPI } from '@/http/student/index'

// type EChartsOption = echarts.EChartsOption
// const tableData = ref()
// const getTableData = async () => {
//   const res = await getTableDataAPI()
//   console.log(res)
//   tableData.value = Object.keys(res.provinceCounts).map((province) => {
//     return {
//       name: province,
//       value: res.provinceCounts[province],
//     }
//   })
//   console.log(tableData.value)
// }
onMounted(async () => {
  //   getTableData()
  const tableData = ref()
  const res = await getTableDataAPI()
  tableData.value = Object.keys(res.provinceCounts).map((province) => {
    return {
      name: province,
      value: res.provinceCounts[province],
    }
  })
  console.log(tableData.value)

  let option: echarts.EChartsOption
  let mapDom = document.getElementById('map')
  let mapChart = echarts.init(mapDom)
  //初始化元素
  echarts.registerMap('china', china as any)
  mapChart.setOption(
    (option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} 人',
      },
      title: {
        text: '雷昂2147094117作业',
        subtext: '各省人数分布',
        left: 'center',
      },
      visualMap: {
        type: 'piecewise',
        pieces: [{ color: 'red' }],
      },
      series: [
        {
          name: '中国',
          type: 'map',
          map: 'china',
          label: {
            // 省份的名称是否显示
            show: true,
            // 未选字体颜色
            color: '#fff',
            // 字体大小
            fontSize: 10,
          },
          data: tableData.value,
          itemStyle: {
            normal: {
              borderColor: 'rgba(255, 255, 255, 0.4)',
              areaColor: 'rgba(18,77,178,0.2)',
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 1,
              shadowColor: 'rgba(189,243,249)',
            },
            emphasis: {
              show: false,
              // 每个区域的颜色
              // 鼠标滑过颜色
              areaColor: '#97EFF4',
              // 鼠标滑过边框颜色
              shadowColor: '#05EFF7',
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
        },
      ],
    }),
  )
})
</script>

<template>
  <el-card>
    <div
      class="map"
      id="map"
      style="height: 55vw; width: 90%; margin-top: 18vw"
    ></div>
  </el-card>
</template>

<style scoped lang="scss"></style>
